<template>
  <div class="comments-item">
    <Avatar :url="data.user.avatar_url" :size="24"/>
    <div class="comments-item__body">
      <div class="comments-item__header">
        <a class="comments-item__name" :href="data.user.html_url">{{ data.user.name }}</a>
        <timeago :datetime="data.updated_at"/>
        <span v-if="creator.id === data.user.id" class="label comments-item__label">拥有者</span>
      </div>
      <div class="comments-item__content">
        <Markdown-it-vue :content="data.body"/>
      </div>
    </div>
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
import Avatar from '@/components/Avatar.vue'
export default {
  props: {
    data: Object,
    creator: Object
  },
  components: {
    MarkdownItVue,
    Avatar
  }
}
</script>

<style>
.comments-item__header {
  font-size: 16px;
}

.comments-item__label.label {
  color: #21BA45;
  border-color: #9bd4a9;
  font-size: 0.9em;
}

.comments-item {
  display: flex;
}

.comments-item__body {
  margin-left: 8px;
}

.comments-item__content {
  margin-top: 8px;
}
</style>